<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>书籍购物车</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div id="app">
    <div v-if="books.length">
      <table>
        <thead>
          <th></th>
          <th>名称</th>
          <th>出版日期</th>
          <th>单价</th>
          <th>总价</th>
          <th>数量</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in books">
            <!-- 可以直接通过遍历属性获取属性值 -->
            <!-- <td v-for="value in item">{{ value }}</td> -->

            <!-- 但是由于某些属性值需要添加其它显示内容，所以一个一个遍历 -->
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.date }}</td>
            <!-- 1. Mustache语法可以直接写表达式 -->
            <!-- <td>{{ '￥'+ item.price.toFixed(2) }}</td> -->
            <!-- 2. 通过methods方法设置 -->
            <!-- <td>{{ getFinalPrice(item.price) }}</td> -->
            <!-- 3. 通过filters过滤器使用 -->
            <td>{{ item.price | showPrice }}</td>

            <td>{{ item.allprice | showPrice }}</td>
            <td>
              <!-- 动态绑定按钮，控制数量交互 -->
              <button @click="sub(index)" :disabled="item.count <= 1">-</button>
              {{ item.count }}
              <button @click="add(index)">+</button>
            </td>
            <td>
              <button @click="removeHandle(index)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h3>总价格: {{ totalPrice | showPrice }}</h3>
    </div>
    <div v-else>
      <h3>购物车已经空了哦~ </h3>
    </div>
  </div>

  <script src="../../js/vue.js"></script>
  <script src="main.js"></script>
</body>

</html>